<template>
  <el-row :gutter="20" type="flex">
    <el-col :span="16">
      <NewCard title="发票列表" :isright="true">
        <template #right>
          <ComForm
            :list="comForm"
            @EventReset="reset"
            @EventOnsubmit="inquireFn"
          ></ComForm>
        </template>

        <ComTable
          @EventRowClick="RowClickFn"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
          :pagination="{
            total: pageing.total,
            pageNum: pageing.pageNum,
            pageSize: pageing.pageSize,
          }"
          :list="tableData"
          :modes="tableModes"
        >
          <el-table-column align="left" width="100" label="发票状态">
            <template slot-scope="scope">
              <span>{{ selecstatus(scope.row.status) }}</span>
            </template>
          </el-table-column>
        </ComTable>
      </NewCard>
    </el-col>
    <el-col :span="8">
      <NewCard title="发票详情">
        <div class="details">
          <h3>发票信息</h3>
          <ul>
            <li>
              <span>发票类型</span>
              <p>{{ selectype(oderlist.type) }}</p>
            </li>
            <li>
              <span>抬头类型</span>
              <p>{{ selecttitle(oderlist.titleType) }}</p>
            </li>
            <li>
              <span>发票抬头</span>
              <p>{{ oderlist.title }}</p>
            </li>
            <li>
              <span>企业税号</span>
              <p>{{ oderlist.sh }}</p>
            </li>
            <li>
              <span>注册地址</span>
              <p>
                {{ province }}{{ city }}{{ location }}{{ oderlist.address }}
              </p>
            </li>
            <li>
              <span>注册电话</span>
              <p>{{ oderlist.phone }}</p>
            </li>
            <li>
              <span>开户银行</span>
              <p>{{ oderlist.khyh }}</p>
            </li>
            <li>
              <span>银行账号</span>
              <p>{{ oderlist.yhzh }}</p>
            </li>
            <li v-if="oderlist.amount">
              <span>发票金额</span>
              <p>¥{{ oderlist.amount | sumFilters }}</p>
            </li>
          </ul>
          <h3>收件人信息</h3>
          <ul>
            <li>
              <span>收件人</span>
              <p>{{ oderlist.sjr }}</p>
            </li>
            <li>
              <span>手机号</span>
              <p>{{ oderlist.tel }}</p>
            </li>
            <li>
              <span>地址</span>
              <p>{{ oderlist.address }}</p>
            </li>
          </ul>
          <h3>所含订单 {{ oderlist.orderList && oderlist.orderList.leght }}</h3>
          <ul>
            <li v-for="(ele, index) in oderlist.orderList" :key="ele.id">
              <span>订单</span>
              <p>{{ ele.remark }}</p>
            </li>
            <!-- <li>
              <span>订单2</span>
              <p>正式工劳动合同</p>
            </li>
            <li>
              <span>订单3</span>
              <p>我国税收法律体系有哪些？</p>
            </li> -->
          </ul>
        </div>
        <SubBtn v-if="oderlist.status == '1'">
          <template slot="btn">
            <el-button
              round
              class="addBtn"
              v-if="!invoice"
              @click="invoiceclick"
              >完成开票</el-button
            >
          </template>
          <template slot="btn" v-if="invoice">
            <el-input
              v-model="Invoicecode"
              placeholder="请输入发票代码"
              size="mini"
              style="margin: 5px"
            ></el-input>
            <!-- v-hasPermi="['financial:invoice:edit']" -->
            <el-button round class="addBtn" @click="submit(oderlist)"
              >确定</el-button
            >
            <el-button round @click="cancel">取消</el-button>
          </template>
        </SubBtn>
        <div class="mailinvoice" v-if="oderlist.status == '2'">
          <div class="mailinvoicebotton">
            <el-button
              round
              class="mailinvoicebtn"
              @click="invoiceclick"
              v-if="makeinvoice"
              >邮寄发票</el-button
            >
          </div>
          <div v-if="!makeinvoice" class="inputall">
            <div>
              <el-col :span="6">
                <el-input
                  size="mini"
                  v-model="formInline.kddh"
                  placeholder="请输入快递单号"
                ></el-input>
              </el-col>
              <el-col :span="6">
                <el-input
                  size="mini"
                  v-model="formInline.kdgs"
                  placeholder="请输入快递公司"
                ></el-input>
              </el-col>
              <el-col :span="6">
                <el-date-picker
                  size="mini"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  v-model="formInline.kdTime"
                  type="datetime"
                  placeholder="选择日期时间"
                >
                </el-date-picker>
              </el-col>
            </div>
          </div>
          <div v-if="!makeinvoice" class="btnall">
            
            <el-button class="determine" round @click="submitForm(formInline)">确定</el-button>

            <el-button round class="cancel"  @click="cancel">取消</el-button>
          </div>

          <!-- <el-form v-if="!makeinvoice" :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item prop="kddh">
              <el-col :span="16">
                <el-input
                  size="mini"
                  v-model="formInline.kddh"
                  placeholder="请输入快递单号"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item prop="kdgs">
              <el-col :span="16">
                <el-input
                  size="mini"
                  v-model="formInline.kdgs"
                  placeholder="请输入快递公司"
                ></el-input>
              </el-col>
            </el-form-item>
              <el-form-item prop="kdgs">
              <el-col :span="16">
                <el-input
                  size="mini"
                  v-model="formInline.kdgs"
                  placeholder="请输入快递公司"
                ></el-input>
              </el-col>
            </el-form-item>
           
             <el-button round class="addBtn" @click="submitForm('ruleForm')"
            >确定</el-button
          >
          <el-button round @click="cancel">取消</el-button>
          </el-form>
          -->
        </div>
      
      </NewCard>
    </el-col>
  </el-row>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import ComForm from "@/wss/components/comForm.vue";
import ComTable from "@/wss/components/comTable.vue";
import SubBtn from "@/wss/components/subBtn.vue";
import {
  getinvoicelistapi,
  getinvoiceidlist,
} from "@/wss/newApi_3-24/askAround/orderList";
import { editinvoiceidlist } from "@/wss/newApi_3-24/askAround/index";
//引入省市区数据的插件
import { CodeToText } from "element-china-area-data";
export default {
  props: ["masetrid"],
  components: {
    NewCard,
    ComForm,
    ComTable,
    SubBtn,
  },
  data() {
    return {
      // 表单选项
      comForm: {
        modes: [
          {
            formType: "input",
            placeholder: "用户姓名",
            mode: "nickName",
          },
          {
            mode: "no",
            formType: "input",
            placeholder: "发票代码",
          },

          {
            placeholder: "发票类型",
            mode: "type",
            formType: "select",
            select: [
              {
                value: "1",
                label: "普通发票",
              },
              {
                value: "2",
                label: "增值税专用发票",
              },
            ],
          },
          {
            placeholder: "发票状态",
            mode: "status",
            formType: "select",
            select: [
              {
                label: "未开票 ",
                value: 1,
              },
              {
                label: "已开票 ",
                value: 2,
              },
              {
                label: "已邮寄 ",
                value: 2,
              },
            ],
          },
        ],
      },
      formInline: {
        kddh: "",
        kdgs: "",
        kdTime: "",
      },
      userid: "",
      // 分页参数
      pageing: { pageNum: 1, pageSize: 10, total: 0 },
      //发票详情数据
      oderlist: [],
      // 表格信息
      makeinvoice: true,
      Invoicecode: "", //发票代码
      uninvoice: false, //未开票按钮显示隐藏
      invoice: false, //开票按钮显示隐藏
      postinvoice: true, //邮寄发票

      tableData: [],
      province: "",
      province: "", //省
      city: "", //市
      location: "", //区
      // 表格参数
      tableModes: [
        {
          label: "用户",
          mode: "nickName",
          width: 100,
        },
        {
          label: "发票代码",
          mode: "no",
        },

        {
          label: "发票类型",
          mode: "type",
          showOverflowTooltip: true,
          options: [
            {
              l: "普通发票 ",
              v: 1,
            },
            {
              l: "增值税专用发票 ",
              v: 2,
            },
          ],
        },
        {
          label: "开票金额",
          mode: "amount",
        },
        {
          label: "申请时间",
          mode: "createdTime",
          showOverflowTooltip: true,
        },
        {
          label: "开票时间",
          mode: "updatedTime",
          showOverflowTooltip: true,
        },
        {
          label: "邮寄时间",
          mode: "kdTime",
          showOverflowTooltip: true,
        },
        // {
        //   label: "发票状态",
        //   mode: "state",
        // },
      ],
    };
  },
  mounted() {
    this.getinvoicelistapifn();
  },
  methods: {
    //获得省份
    getProvince() {
      return CodeToText[this.selectExpertInfo.province];
    },
    //获得城市
    getCity() {
      return CodeToText[this.selectExpertInfo.city];
    },
    //查询发票
    async getinvoicelistapifn(data) {
      console.log(data, "123");
      let { pageNum, pageSize } = this.pageing;

      let { code, rows, total } = await getinvoicelistapi({
        pageNum,
        pageSize,
        nickName: data && data.nickName,
        no: data && data.no,
        type: data && data.type,
        status: data && data.status,
      });
      if ((code = 200)) {
        this.tableData = rows;
        this.pageing.total = total;
      }
    },
    //查询对应ID订单信息
    async getinvoiceidlistfn(id) {
      let { code, data } = await getinvoiceidlist({ id });
      if (code == 200) {
        this.oderlist = data;
        this.oderlist.orderList.forEach((item) => {
          console.log(item, "111");
          if (item.remark) {
            item.remark = item?.remark.slice(
              item?.remark.indexOf("：") + 1,
              item?.remark.lastIndexOf("；")
            );
          }
        });
        this.province = CodeToText[this.oderlist.cityCode.slice(0, 2) + "0000"];
        this.city = CodeToText[this.oderlist.cityCode.slice(0, 4) + "00"];
        this.location = CodeToText[this.oderlist.cityCode];
      }
    },

    RowClickFn(row) {
      console.log(row);

      this.getinvoiceidlistfn(row.id);
      this.userid = row.id;
    },
    //未开票完成开票确认按钮
    async submit(value) {
      console.log(value, "value");
      var myDate = new Date();
      var year = myDate.getFullYear(); //获取当前年
      var mon = myDate.getMonth() + 1; //获取当前月
      var date = myDate.getDate(); //获取当前日
      var hours = myDate.getHours(); //获取当前小时
      var minutes = myDate.getMinutes(); //获取当前分钟
      var seconds = myDate.getSeconds(); //获取当前秒
      var now =
        year +
        "-" +
        mon +
        "-" +
        date +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds;
      let obj = {
        no: this.Invoicecode,
        status: 2,
        updatedTime: now,
      };
      let data = Object.assign(value, obj);
      console.log(data, "data");
      let { code, msg } = await editinvoiceidlist(data);
      if (code == 200) {
        this.$message({
          message: "操作成功",
          type: "success",
        });
      }
      this.Invoicecode = "";
      this.invoice = false;
      this.makeinvoice = true;
      this.getinvoicelistapifn(this.userid);
    },
    // 邮寄发票
    async submitForm(){
    if ( this.formInline.kddh !="" && this.formInline.kdgs !="" &&this.formInline.kdTime!="") {
       this.oderlist.kddh = this.formInline.kddh;
      this.oderlist.kdgs = this.formInline.kdgs;
      this.oderlist.kdTime = this.formInline.kdTime;
      this.oderlist.status = "3";
      let { code, msg } = await editinvoiceidlist(this.oderlist);
      if (code == 200) {
        this.$message({
          showClose: true,
          message: msg,
          type: "success",
        });
        this.drawer = false;
        this.oderlist.kddh = "";
       this.oderlist.kdgs = "";
      this.oderlist.kdTime = "";
            this.getinvoicelistapifn(this.userid);
      }
      
    }else{
         this.$message({
            message: "请输入对应信息",
            type: "error",
          });
    }
     
    },
 
    selecstatus(value) {
      const stateMap = {
        1: "未开票",
        2: "已开票",
        3: "已邮寄",
      };
      return stateMap[value];
    },
    selectype(value) {
      const typeMap = {
        1: "普通发票",
        2: "增值税专用发票",
      };
      return typeMap[value];
    },
    selecttitle(value) {
      const typeMap = {
        1: "个人",
        2: "企业",
      };
      return typeMap[value];
    },
    invoiceclick() {
      this.invoice = true;
      this.makeinvoice = false;
    },
    cancel() {
      this.invoice = false;
      this.makeinvoice = true;
    },
    inquireFn(paramsArr) {
      let data = {
        nickName: paramsArr[0].nickName,
        no: paramsArr[1].no,
        type: paramsArr[2].type,
        status: paramsArr[3].status,
      };

      this.getinvoicelistapifn(data);
    },
    reset() {
      this.form = {};
      // this.pageing = { pageNum: 1, pageSize: 10,};
    },
    handleCurrentChange(pageNum) {
      this.pageing.pageNum = pageNum;
      this.getinvoicelistapifn();
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      this.pageing.pageSize = pageSize;
      this.getinvoicelistapifn();
    },
  },
};
</script>

<style scoped>
h3,
h4,
p,
ul,
li {
  margin: 0;
  padding: 0;
}

.el-row,
.el-row .el-col {
  height: 100%;
}

::v-deep .el-card {
  position: relative;
}

::v-deep .el-card__body {
  height: 100%;
}
::v-deep .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .el-card__body > div::-webkit-scrollbar {
  width: 0;
}

/* 发票列表表单 */
::v-deep .right .el-input--medium {
  width: 120px !important;
}
::v-deep .right .el-button--default {
  /* display: none; */
}

/* 发票详情 */
.details {
  margin-top: 20px;
  margin-bottom: 60px;
}
.details h3 {
  margin: 0;
  color: #2e405e;
  font-size: 16px;
  font-weight: bold;
}
.details ul {
  margin-top: 10px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #efefef;
}
.details ul:last-child {
  border-bottom: 0;
}
.details ul > li {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 36px;
}
.details ul > li > span {
  display: block;
  width: 100px;
  color: #999;
}
.details ul > li > p {
  flex: 1;
  color: #333;
}

/* 右侧按钮样式 */
::v-deep .subBtn {
  padding: 8px 30px !important;
  z-index: 99;
}
::v-deep .subBtn > .el-button {
  width: 100px;
  padding: 8px 0 !important;
  font-size: 14px;
  color: #606e84;
}
::v-deep .subBtn > .el-button.el-button--primary {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}

.mailinvoice {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 5px 0px;
  border-top: 1px solid #ecedf0;
  background-color: #fff;
  z-index: 2;
}
.mailinvoicebotton {
  display: flex;
  justify-content: flex-end;
  margin-right: 60px;
}
.mailinvoicebtn {
  width: 110px;
  font-weight: bold;
  border-color: #f87a23;
  background-color: #f87a23;
  color: #fff;
}
.btnall {
  padding: 0px 5px;
  margin: 5px;
    display: flex;
  justify-content: flex-end;
  margin-right: 60px;
}
 .btnall .determine{
  width: 80px;
    border-color: #f87a23;
  background-color: #f87a23;
  color: #fff;
 }
  .btnall .cancel{
  width: 80px;
 
 }
</style>